import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Modal, Input, Card, Form } from 'antd';
import { messErr } from '@/utils/message';

import styles from './AddNewField.less';


class AddNewField extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      fieldName: '',
      area: null,
    };
  }

  open = (next = () => {}) => {
    this.setState({ visible: true }, next);
  };

  close = (next = () => {}) => {
    this.setState({
      visible: false,
      fieldName: '',
      area: null,
    }, next);
  };

  handleOk = () => {
    const {
      handleSubmit,
    } = this.props;
    const {
      fieldName,
      area,
    } = this.state;
    if(!fieldName.length) {
      messErr('土地名请输入至少一个字符');
      return false;
    }
    if(area === null) {
      messErr('请输入土地面积');
      return false;
    }
    this.close(() => handleSubmit({
      fieldName,
      area,
    }));
  };

  render() {
    const {
      fieldName,
      area,
    } = this.state;

    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
    };

    return (
      <Modal
        title="新增土地"
        visible={this.state.visible}
        onOk={this.handleOk}
        onCancel={() => this.close()}
      >
        <Card bordered={false}>
          <Form.Item {...formItemLayout} label="土地名">
            <Input
              value={fieldName}
              onChange={e => this.setState({ fieldName: e.target.value })}
              size="small"
              maxLength={10}
            />
          </Form.Item>
          <Form.Item {...formItemLayout} label="土地面积">
            <Input
              value={area}
              onChange={e => this.setState({ area: e.target.value })}
              size="small"
              maxLength={10}
            />
          </Form.Item>
        </Card>
      </Modal>
    );
  }
}

AddNewField.propTypes = {
  handleSubmit: PropTypes.func.isRequired,
};

AddNewField.defaultProps = {

};

export default AddNewField;
